<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showPos">查看位置</button>
    </div>
</template>

<script setup lang="ts" name="Persona">
    import { ref } from 'vue'; // 用来将数据变成响应式
    // data
    let name = ref('zzq'); // ref 函数会将基本类型参数包装为 RefImpl 对象，其中有一个属性是 value，其中包含了该参数的原始值
    let age = ref(28);
    let position = 'PF';

    console.log(name);
    console.log(age);
    console.log(position);

    // methods
    function changeName() {
        name.value = 'zm'; // 对一个 RefImpl 对象进行修改时，需要修改它的 value 属性
        console.log(name.value);
    }
    function changeAge() {
        age.value--;
        console.log(age.value);
    }
    function showPos() {
        alert(position);
    }
</script>

<style scoped>
.person {
    background-color: #d8a7af;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
</style>
